Hono JSX renders bare `popover` as `popover="true"` which relies on
the invalid-value-default behavior. Explicit "auto" is clearer.

Three fixes:
- Move display toggling to layout layer base rules (not media query
  fighting against components layer specificity)
- Use position:fixed for popover card (top-layer elements can't use
  position:absolute relative to DOM ancestors)
- Hide entire nav at mobile, show hamburger button to the right

The popover can't activate if its ancestor has display:none.
Instead, rely on the popover's natural hidden state at mobile
(UA stylesheet hides non-open popovers). Only apply display:contents
override at desktop where we want the wrapper to be transparent.

The UA stylesheet for :popover-open sets inset:0, width:fit-content,
and margin:auto which fights with our positioning. Reset with
inset:auto, width:auto, height:auto before setting our values.

- Move popover attribute onto <nav> itself (eliminates empty wrapper
  element taking up flex gap space at mobile)
- At mobile, only brand + button are visible flex children, so
  space-between puts button at right edge
- Use physical 'right' instead of 'inset-inline-end' for reliable
  positioning in the top layer

The browser applies position:fixed and other styles to [popover]
elements. At desktop we need the nav as a normal flex child, so
explicitly reset position:static, inset:auto, etc.